<script setup>
import { Minus } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  checked: { type: Array, default: () => ([]) },
  disabled: Boolean,
  multi: Boolean,
})

const emit = defineEmits(['update:modelValue', 'change', 'remove'])

const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const typeChange = ({ value: type }) => {
  form.value.percent = undefined
  form.value.config_time = undefined
  const ways = {
    2: 1,
    3: 3,
    4: 5,
  }
  form.value.time_way = ways[type]
}
let typeOptions = [{ label: '预付', value: 1 }, { label: '货到', value: 2 }, { label: '月结', value: 3 }, { label: '阿里账期', value: 4 }]
if (props.multi) {
  typeOptions = computed(() => {
    const { checked } = props
    if (checked[0] === 3) {
      return [{ label: '月结', value: 3, disabled: checked.includes(3) }]
    }
    return [{ label: '预付', value: 1, disabled: checked.includes(1) }, { label: '货到', value: 2, disabled: checked.includes(2) }, { label: '月结', value: 3, disabled: checked.includes(3) }]
  })
}
const timeOptions = [{ label: '按下单时间', value: 3 }, { label: '按首次入库时间', value: 1 }, { label: '按最后入库时间', value: 2 }, { label: '按固定时间', value: 4 }]
const time2Options = [{ label: '按首次入库时间', value: 1 }, { label: '按最后入库时间', value: 2 }]
const time4Options = [{ label: '确认收货后结算', value: 5 }, { label: '指定结算日', value: 6 }]
const aliDateOptions = [
  { label: 7, value: 7 },
  { label: 15, value: 15 },
  { label: 30, value: 30 },
  { label: 45, value: 45 },
  { label: 60, value: 60 },
  { label: 90, value: 90 },
  { label: 120, value: 120 },
  { label: 150, value: 150 },
  { label: 180, value: 180 },
  { label: 360, value: 360 },
]

const times = [
  { label: 15, value: 15 },
  { label: 30, value: 30 },
  { label: 45, value: 45 },
  { label: 50, value: 50 },
  { label: 60, value: 60 },
  { label: 65, value: 65 },
  { label: 75, value: 75 },
  { label: 80, value: 80 },
  { label: 85, value: 85 },
  { label: 90, value: 90 },
  { label: 95, value: 95 },
  { label: 100, value: 100 },
  { label: 110, value: 110 },
  { label: 120, value: 120 },
  { label: 150, value: 150 },
  { label: 180, value: 180 },
  { label: 360, value: 360 },
]

const days = [...new Array(31).keys()].map(d => ({ label: d + 1, value: d + 1 }))
</script>

<template>
  <div class="flex items-center">
    <v-group class="grid grid-cols-5 items-center w-full">
      <VSelect v-model="form.config_way" :options="typeOptions" class="w-full" placeholder="请选择" select clearable
        @change="typeChange" />
      <div class="flex" v-if="multi">
        <el-input-number v-model="form.percent" controls-position="right" :min="0" :step="1" :precision="0"
          class="w-full" />
        <span class="mx-1">%</span>
      </div>

      <template v-if="form.config_way === 3">
        <VSelect v-model="form.time_way" placeholder="请选择" select :options="timeOptions" class="w-full" />
        <VSelect v-if="form.time_way === 4" v-model="form.config_time" placeholder="请选择" select :options="times" filterable
          clearable class="w-full" />
        <el-input-number v-else v-model="form.config_time" controls-position="right" :min="0" :step="1" :precision="0"
          placeholder="天数" class="w-full" />
      </template>
      <template v-if="[2, 4].includes(form.config_way)">
        <VSelect v-model="form.time_way" :options="form.config_way === 2 ? time2Options : time4Options" class="w-full" placeholder="请选择" select />
        <VSelect v-if="form.config_way === 4" v-model="form.config_time" :options="aliDateOptions" class="w-full"
          placeholder="请选择" select />
        <el-input-number v-else v-model="form.config_time" controls-position="right" :min="0" :step="1" :precision="0"
          placeholder="天数" class="w-full" />
      </template>

      <div v-if="form.config_way > 2" class="flex ml-2">
        <VSelect v-if="form.time_way === 4" v-model="form.settle_cycle" placeholder="请选择" select :options="days" filterable
          clearable class="w-full" />
      </div>
    </v-group>
    <el-button v-if="multi" size="small" class="ml-2" @click="emit('remove')" circle><i class="dk-iconfont icon-Minus" /></el-button>
  </div>
</template>
